<template>
    <div>
        <ul style="background:#ffffff;padding:0 4vw;margin-top:15px">
            <li style="height: 50px;line-height:50px" v-on:click="whetherShow($event)"><span>退款原因</span><span style="color:#999999;font-size:12px;display:inline-block;margin-left:10px">{{reason}}</span><span style="float:right;color:#999999">请选择<img src="../../assets/展开.png" alt="" style="width:14px;vertical-align:middle"></span></li>
            <li style="height: 50px;line-height:50px" v-if="type==1"><span>退款金额</span><span style="color:#FF4C50;float:right">￥{{sum}}</span></li>
        </ul>
        <div style="position:relative;padding:15px 4vw;background:#ffffff;margin-top:15px">
            <span>问题描述</span>
            <textarea name="" id="contents" cols="30" rows="10" style="width:92vw;margin:0 auto;margin-top:10px;height:100px;resize:none;display:block;padding: 8px 8px 20px 8px;overflow:hidden;outline:none" v-on:keyup="wordNumfun($event)" maxlength="150"></textarea>
            <span style="position:absolute;bottom:15px;right: 6vw;color:#999999">{{wordNum}}/150</span>
        </div>
        <div style="position:fixed;top:0;height:100vh;background:rgba(0,0,0,.3);width:100vw;z-index:100" v-show="isShow" >
            <ul style="padding:0 4vw;position:absolute;bottom:0px;background:#ffffff">
                <li style="text-align:center;font-size:18px;color:#333333;height:60px;line-height:60px">请选择退款原因</li>
                <li v-for="(reason,i) in tuikuanReason" :key='i' style="font-size:15px;color:#333333;height:50px;line-height:50px;"  class="select-control-group">
                    {{reason}}
                    <mu-flex class="select-control-row" style="float:right;margin-top:15px" v-on:click="tuikuanReasonf(reason)">
                        <mu-radio :value="i" v-model="normal.radio"   label="" color="#FF4C50" :ripple=false class="reason_id" name="reason_id"></mu-radio>
                    </mu-flex>
                </li>
                <mu-button :ripple=false :flat=true style="border-radius: 100px;width:92vw;height:50px;margin:0 auto;font-size:18px;background:#333333;color:#ffffff" v-on:click="whetherShow($event)" >确定</mu-button>
            </ul>
        </div>
        <div style="background:#ffffff;padding:18px 15px;margin-top:15px">
            <span>添加图片</span>
            <div class="upload" style="display:flex;flex-wrap:wrap">
                <div class="upload_warp_img" v-show="imgList.length!=0" style="display:flex;flex-wrap:wrap">
                    <div class="upload_warp_img_div" v-for="(item,index) of imgList" :key="index" style="width:75px;height:75px;margin-right:10px">
                        <img :src="item.file.src" style="width:75px;height:75px">
                    </div>
                </div>
                <div class="upload_warp" style="display:flex;flex-wrap:wrap">
                    <div class="upload_warp_left" @click="fileClick" style="height:75px;width:75px;border:1px #cecece dashed;text-align:center;font-size:12px">
                        <span style="display:block;margin:10px;font-size:14px">+</span>
                        <span style="display:block">添加图片<br/>（最多九张）</span>
                    </div>
                </div>
                <input @change="fileChange($event)" type="file" id="upload_file" class="upload_file" multiple='multiple' style="display: none" name="image"/>
                
            </div>
        </div>
        
        
        <!-- <div>
            <fileupload></fileupload>
            <uploader :options="options" class="uploader-example"></uploader>
        </div> -->
        <div style=";position:fixed;bottom:0px;width:100vw">
            <mu-button type='button' :ripple=false :flat=true @click="submit" style="width:100vw;height:50px;margin:0 auto;font-size:18px;background:#333333;color:#ffffff;display:block">提交</mu-button>
        </div>
    </div>
</template>
<script>
// import FileUpload from 'vue-simple-upload/dist/FileUpload'
import ReasonList from '../serviceType/reasonList.vue'
export default {
    // name:'afterSaleSubmit',
    components:{
        // 'fileupload': FileUpload,
        'ReasonList': ReasonList,
    },
    data () {
        return {
            type:'',
            tuikuanReason:['七天无理由退换','空包裹','未按时间发货','物流无跟踪信息','货物破损已拒签','其他'],
            sum:500,
            wordNum:0,
            isShow:false,
            reason:'',
            normal: {
                checkbox: true,
                radio: '',
                switch: false
            },
            imgList: [],
            size: 0,
            order_goods:[{
                order_goods_id:546,
                order_goods_number1:1
            }],
        }
    },
    computed:{
        // isShowChange:function(){
        //     this.isShow = false;
        // },
    },
    methods:{
        submit:function(){
            var that=this;
            var formData = new FormData();
            console.log(document.getElementsByClassName("upload_file")[0],document.getElementsByClassName("upload_file")[0].files)
            formData.append("image",document.getElementById("upload_file").files[0]);
            formData.append("time",'1532658064');
            formData.append('device_id','1532658064');
            formData.append('version','1.0.1');
            formData.append('platform','android');
            formData.append('token','69f7e6e2e95aaef9c58efb1fefdbba4b');
            formData.append('order_goods',JSON.stringify(that.order_goods));
            formData.append('reason_id',this.normal.radio);
            formData.append('type',this.$route.query.id);
            formData.append('contents',document.getElementById('contents').value)
            this.$http.post('/api/api/user/applyRefund', formData)
            .then(function (response) {
                console.log('success:',response);
            })
            .catch(function (response) {
                console.log(response);
            })

        },
        wordNumfun:function(e){
            this.wordNum=e.target.value.length          
        },
        whetherShow:function(e){
            if(this.isShow){
                this.isShow=false;
            }else{
                this.isShow=true;
            }
            console.log(this.isShow)
        },
        tuikuanReasonf:function(e){
            this.reason=e
        },
        fileClick:function() {
            document.getElementById('upload_file').click()
        },
        fileChange:function(el) {
            if (!el.target.files[0].size) return;
            this.fileList(el.target);
            console.log(el.target.files)
            // el.target.value = ''
        },
        fileList:function(fileList) {
            let files = fileList.files;
            console.log(files)
            for (let i = 0; i < files.length; i++) {
                //判断是否为文件夹
                if (files[i].type != '') {
                    this.fileAdd(files[i]);
                } else {
                    //文件夹处理
                    this.folders(fileList.items[i]);
                }
            }
        },
          //文件夹处理
        folders:function(files) {
            let _this = this;
            //判断是否为原生file
            if (files.kind) {
                files = files.webkitGetAsEntry();
            }
            files.createReader().readEntries(function (file) {
                for (let i = 0; i < file.length; i++) {
                    if (file[i].isFile) {
                        _this.foldersAdd(file[i]);
                    } else {
                        _this.folders(file[i]);
                    }
                }
            })
        },
        foldersAdd:function(entry) {
            let _this = this;
            entry.file(function (file) {
                _this.fileAdd(file)
            })
        },
        fileAdd:function(file) {
            //总大小
            this.size = this.size + file.size;
            //判断是否为图片文件
            if (file.type.indexOf('image') == -1) {
                file.src = 'wenjian.png';
                this.imgList.push({
                    file
                });
            } else {
                let reader = new FileReader();
                reader.vue = this;
                reader.readAsDataURL(file);
                reader.onload = function () {
                    file.src = this.result;
                    this.vue.imgList.push({
                        file
                    });
                }
            }
        },
        // fileDel(index) {
        //     this.size = this.size - this.imgList[index].file.size;//总大小
        //     this.imgList.splice(index, 1);
        // },
        // bytesToSize(bytes) {
        //     if (bytes === 0) return '0 B';
        //     let k = 1000, // or 1024
        //         sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        //         i = Math.floor(Math.log(bytes) / Math.log(k));
        //     return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        // },
        //   dragenter(el) {
        //       el.stopPropagation();
        //       el.preventDefault();
        //   },
        //   dragover(el) {
        //       el.stopPropagation();
        //       el.preventDefault();
        //   },
        //   drop(el) {
        //       el.stopPropagation();
        //       el.preventDefault();
        //       this.fileList(el.dataTransfer);
        //   }
    },
    created(){
        this.type=this.$route.query.id;
    },
    mounted(){
       
    }

    
}
</script>
<style lang='scss'>
    
</style>